<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css"
			href="https://cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/mc_2014/global/css/v2/global-202104231502.css" />
		<style type="text/css">
			body {
				padding: 0px;
				margin: 0px;
			}

			#navigation {
				height: 50px;
				background-color: #262F3E;
				margin-bottom: 30px;
				padding-left: 20px;
			}

			#navigation .n-left,
			#navigation .n-right {}

			#navigation .n-left {
				float: left;
			}

			#navigation .n-left .logo {
				height: 50px;
			}


			#navigation .n-left .logo img {
				margin-top: 13px;
				height: 24px;
				width: 232px;
				cursor: pointer;
			}

			#navigation .n-right {
				float: right;
				position: relative;
				padding-right: 20px;
			}

			#navigation .n-right .avatar,
			#navigation .n-right .user-info {
				float: left;
				height: 64px;
			}

			#navigation .n-right .avatar {
				margin-right: 5px;
			}

			#navigation .n-right .avatar img {
				margin-top: 15px;
				height: 20px;
				width: 20px;
				border-radius: 50%;
			}

			#navigation .n-right .user-info {
				padding-top: 16px;
				font-size: 12px;
				font-family: 微软雅黑;
			}

			#navigation .n-right .user-info .user-info-item {
				color: #C1C6C8;
			}

			#navigation .n-right .user-info .user-info-item:hover {
				color: #FFFFFF;
				cursor: pointer;
			}

			#navigation .n-right .user-menu {
				background-color: #151822;
				color: #C1C6C8;
				min-width: 140px;
				position: absolute;
				right: 0px;
				top: 50px;
			}

			#navigation .n-right .user-menu ul {
				padding: 10px 0px 10px 0px;
				list-style-type: none;
			}

			#navigation .n-right .user-menu ul li {
				line-height: 32px;
				font-size: 12px;
				padding: 0 20px;
			}

			#navigation .n-right .user-menu ul li:hover {
				background-color: #262F3E;
				color: #fff;
				cursor: pointer;
			}

			#navigation .n-right .user-menu ul li .icon {
				vertical-align: text-top;
				margin-right: 8px;
				margin-top: 1px;
				width: 12px;
				height: 12px;
			}
		</style>
	</head>
	<body>
		<div id="navigation">
			<div class="n-left">
				<div class="logo">
					<img :src="logo" alt="">
				</div>
			</div>
			<div class="n-right">
				<div class="avatar">
					<img :src="user.avatar">
				</div>
				<div class="user-info">
					<div class="user-info-item" @click="openUserMenu">{{user.name}}<i class="qc-nav-arrows"></i></div>
				</div>
				<div style="clear: both;"></div>
				<div class="user-menu" v-show="userMenu">
					<ul>
						<li v-for="menu in user.menus" @click="jump(menu)">
							<img v-if="menu.icon!=null&&menu.icon!=''" class="icon" :src="menu.icon">{{menu.name}}
						</li>
						<!-- <li>
							<img class="icon"
								src="https://cloudcache.tencentcs.com/qcloud/tcloud_dtc/static/console_aside_v4/37f55208-6c3f-48e7-b24d-0a698ba803b4-hover.svg">
							账户安全
						</li>
						<li>
							退出
						</li> -->
					</ul>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#navigation',
		data: {
			userMenu: false,
			logo: "https://cbb.cloudwalk.com:9443/cbb-web/img/logo@2x.37274562.png",
			user: {
				avatar: "https://wsoa.wicresoft.com/File/GetImage?fileId=0478b860-135f-44c1-b4e3-aa21533752b9",
				name: "李飞飞",
				menus: [{
					icon: "https://cloudcache.tencentcs.com/qcloud/tcloud_dtc/static/console_aside_v4/ed272013-9ebc-4849-a21c-686ea73147d9-hover.svg",
					url: "http://www.baidu.com",
					name: "账户信息"
				}, {
					icon: "https://cloudcache.tencentcs.com/qcloud/tcloud_dtc/static/console_aside_v4/37f55208-6c3f-48e7-b24d-0a698ba803b4-hover.svg",
					url: "http://www.sina.com",
					name: "账户安全"
				}, {
					url: "http://www.souhu.com",
					name: "退出"
				}]
			}
		},
		methods: {
			on: function() {

			},
			openUserMenu() {
				this.userMenu = !this.userMenu;
			},
			jump(m){
				document.href=m.url;
			}
		}
	})
</script>
